<template>
  <div>
    <div class="main">
      <el-form :model="params" ref="ruleForm" label-position="right" label-width="150px" size="small">
        <el-row class="title" type="flex" justify="space-between">
          微信转账
          <el-row>
            {{params.wxTran ? '关闭': '启用'}}：
            <el-switch v-model="params.wxTran" active-color="#13ce66" inactive-color="#ccc"></el-switch>
          </el-row>
        </el-row>
        <el-row v-if="params.wxTran">
          <el-form-item label="appid" prop="wxTran_appid" :rules="[{required: true, message: '微信转账appid未填',trigger: 'blur'}]">
            <el-input v-model="params.wxTran_appid" placeholder="请输入微信转账appid" clearable />
          </el-form-item>
          <el-form-item label="打款key" prop="wxTran_key" :rules="[{required: true, message: '微信打款key未填',trigger: 'blur'}]" >
            <el-input v-model="params.wxTran_key" placeholder="请输入微信打款key" clearable />
          </el-form-item>
          <el-form-item label="商户号" prop="wxTran_businessNum" :rules="[{required: true, message: '微信转账商户号未填',trigger: 'blur'}]">
            <el-input v-model="params.wxTran_businessNum" placeholder="请输入微信转账商户号" clearable />
          </el-form-item>
          <el-form-item label="支付证书" prop="wxTran_cer" :rules="[{required: true, message: '微信转账支付证书编号未填',trigger: 'blur'}]">
            <el-input v-model="params.wxTran_cer" placeholder="请输入微信转账支付证书编号" clearable />
          </el-form-item>
          <el-form-item label="支付证数的KEY" prop="wxTran_cerKey" :rules="[{required: true, message: '微信转账支付证书的key编号未天',trigger: 'blur'}]"  >
            <el-input v-model="params.wxTran_cerKey" placeholder="请输入微信转账支付证书的key编号" clearable />
          </el-form-item>
        </el-row>
        <el-row class="title" type="flex" justify="space-between">
          微信公众号
          <el-row>
            {{params.wxPub ? '关闭': '启用'}}：
            <el-switch v-model="params.wxPub" active-color="#13ce66" inactive-color="#ccc"></el-switch>
          </el-row>
        </el-row>
        <el-row v-if="params.wxPub">
          <el-form-item label="appid" prop="wxPub_appid" :rules="[{required: true, message: '微信公众号appid未填',trigger: 'blur'}]">
            <el-input v-model="params.wxPub_appid" placeholder="请输入微信公众号appid" clearable />
          </el-form-item>
          <el-form-item label="appkey" prop="wxPub_appkey" :rules="[{required: true, message: '微信公众号appkey未填',trigger: 'blur'}]">
            <el-input v-model="params.wxPub_appkey" placeholder="请输入微信公众号appkey" clearable />
          </el-form-item>
          <el-form-item label="secret" prop="wxPub_appsecret" :rules="[{required: true, message: '微信公众号secret未填',trigger: 'blur'}]">
            <el-input v-model="params.wxPub_appsecret" placeholder="请输入微信公众号secret" clearable />
          </el-form-item>
          <el-form-item label="商户号" prop="wxPub_businessNum" :rules="[{required: true, message: '微信公众号商户号未填',trigger: 'blur'}]">
            <el-input v-model="params.wxPub_businessNum" placeholder="请输入微信公众号商户号" clearable />
          </el-form-item>
          <!--<el-form-item label="退款证数" prop="wxPub_cerFile" :rules="[{required: true, message: '微信公众号退款证数编号未填',trigger: 'blur'}]">
            <el-input v-model="params.wxPub_cerFile" placeholder="请输入微信公众号退款证数编号" clearable />
          </el-form-item>-->
          <el-form-item label="支付证书">
            <input type="file" @change="getUpLoadGzh">
          </el-form-item>
        </el-row>
        <el-row class="title" type="flex" justify="space-between">
          微信小程序
          <el-row>
            {{params.wxMini ? '关闭': '启用'}}：
            <el-switch v-model="params.wxMini" active-color="#13ce66" inactive-color="#ccc"></el-switch>
          </el-row>
        </el-row>
        <el-row v-if="params.wxMini">
          <el-form-item label="appid" prop="wxMini_appid" :rules="[{required: true, message: '微信小程序appid未填',trigger: 'blur'}]">
            <el-input v-model="params.wxMini_appid" placeholder="请输入微信小程序appid" clearable />
          </el-form-item>
          <el-form-item label="appkey" prop="wxMini_appkey" :rules="[{required: true, message: '微信小程序appkey未填',trigger: 'blur'}]">
            <el-input v-model="params.wxMini_appkey" placeholder="请输入微信小程序appkey" clearable />
          </el-form-item>
           <el-form-item label="通用模板id" prop="mini_template_id" :rules="[{required: true, message: '微信小程序通用模板id未填',trigger: 'blur'}]">
            <el-input v-model="params.mini_template_id" placeholder="请输入微信小程序通用模板id" clearable />
          </el-form-item>
          <el-form-item label="secret" prop="wxMini_secret" :rules="[{required: true, message: '微信小程序secret未填',trigger: 'blur'}]">
            <el-input v-model="params.wxMini_secret" placeholder="请输入微信小程序secret" clearable />
          </el-form-item>
          <el-form-item label="商户号" prop="wxMini_businessNum" :rules="[{required: true, message: '微信小程序商户号未填',trigger: 'blur'}]">
            <el-input v-model="params.wxMini_businessNum" placeholder="请输入微信小程序商户号" clearable />
          </el-form-item>
          <!--<el-form-item label="退款证数"  prop="wxMini_cerFile" :rules="[{required: true, message: '微信小程序退款证数编号未填',trigger: 'blur'}]" >
             <el-input v-model="params.wxMini_cerFile" placeholder="请输入微信小程序退款证数编号" clearable></el-input>
          </el-form-item>-->
          <el-form-item label="支付证书">
            <input type="file" @change="getUpLoadXcx">
          </el-form-item>
        </el-row>
        <el-row class="title" type="flex" justify="space-between">
          微信开放支付
          <el-row>
            {{params.wxOpen ? '关闭': '启用'}}：
            <el-switch v-model="params.wxOpen" active-color="#13ce66" inactive-color="#ccc"></el-switch>
          </el-row>
        </el-row>
        <el-row v-if="params.wxOpen">
          <el-form-item label="appid" prop="wxOpen_appid" :rules="[{required: true, message: '微信开放支付appid未填',trigger: 'blur'}]">
            <el-input v-model="params.wxOpen_appid" placeholder="请输入微信开放支付appid" clearable></el-input>
          </el-form-item>
          <el-form-item label="appkey" prop="wxOpen_appkey" :rules="[{required: true, message: '微信开放支付appkey未填',trigger: 'blur'}]">
            <el-input v-model="params.wxOpen_appkey" placeholder="请输入微信开放支付appkey" clearable></el-input>
          </el-form-item>
          <el-form-item label="secret" prop="wxOpen_appsecret" :rules="[{required: true, message: '微信开放支付secret未填',trigger: 'blur'}]">
            <el-input v-model="params.wxOpen_appsecret" placeholder="请输入微信开放支付secret" clearable></el-input>
          </el-form-item>
          <el-form-item label="商户号" prop="wxOpen_businessNum" :rules="[{required: true, message: '微信开放支付商户号未填',trigger: 'blur'}]">
            <el-input v-model="params.wxOpen_businessNum" placeholder="请输入微信开放支付商户号" clearable></el-input>
          </el-form-item>
           <el-form-item label="支付证书" prop="wxOpen_cerFile" :rules="[{required: true, message: '微信开放支付证书未填',trigger: 'blur'}]" >
            <el-input v-model="params.wxOpen_cerFile" placeholder="请输入app支付证书编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="退款证数(文件)">
            <input type="file" @change="getUpLoadKfzf">
          </el-form-item>
        </el-row>
        <el-row class="title" type="flex" justify="space-between">
          支付宝支付
          <el-row>
            {{params.zfb ? '关闭': '启用'}}：
            <el-switch v-model="params.zfb" active-color="#13ce66" inactive-color="#ccc"></el-switch>
          </el-row>
        </el-row>
        <el-row v-if="params.zfb">
          <el-form-item label="appid" prop="zfb_appid" :rules="[{required: true, message: '支付宝appid未填',trigger: 'blur'}]">
            <el-input v-model="params.zfb_appid" placeholder="请输入支付宝appid" clearable></el-input>
          </el-form-item>
          <el-form-item label="公钥" prop="zfb_pubcer" :rules="[{required: true, message: '支付宝公钥未填',trigger: 'blur'}]">
            <el-input v-model="params.zfb_pubcer" placeholder="请输入支付宝公钥" clearable></el-input>
          </el-form-item>
          <el-form-item label="私钥" prop="zfb_pricer" :rules="[{required: true, message: '支付宝私钥未填',trigger: 'blur'}]">
            <el-input v-model="params.zfb_pricer" placeholder="请输入支付宝私钥" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-form-item style="text-align:center;">
          <el-row type="flex" justify="end">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { toBase } from '@/utils/base64'
import * as api from "@/api/company"
export default {
  data() {
    return {
      params: {
        wxTran: false,
        wxTran_appid: '', // 转账appid
        wxTran_businessNum: '', // 转账商户号
        wxTran_key: '', // 微信打款的key
        wxTran_cer: '', // 微信支付证书
        wxTran_cerKey: '', // 支付证书的key
        wxPub: false,
        wxPub_appid: '', // 微信公众号支付的appid
        wxPub_appkey: '', // 微信公众号支付的appkey
        wxPub_appsecret: '', // 微信公众号支付的appsecret
        wxPub_businessNum: '', // 微信公众号支付的商户号
        wxPub_cer: '', // 上传公众号平台文件的base64
        //wxPub_cerFile: '', // 微信公众号支付的证书（退款用）
        wxPub_cerBin: '', // 微信公众号支付证书bin
        wxOpen: false,
        wxOpen_appid: '', // app支付appid
        wxOpen_appkey: '', // app支付key
        wxOpen_appsecret: '', // 微信app支付 secret
        wxOpen_businessNum: '', // 微信app支付 商户号
        wxOpen_cerFile: '', //  微信app支付证书文件
        wxOpern_cerBin: '', // 微信app退款证书bin
        wxOpern_cer: '', // 开发平台
        wxMini: false,
        wxMini_appid: '', // 小程序appid
        wxMini_secret: '', // 小程序secret
        //wxMini_cerFile: '', // 小程序退款证书
        wx_mini_cer_bin: '', // 微信小程序支付证书bin文件
        mini_template_id: '', // 小程序通用模板id
        wxMini_appkey: '', // 小程序appkey
        wxMini_businessNum: '', // 小程序商户号
        wx_mini_cer: '', // 小程序
        zfb: false,
        zfb_appid: '', // 支付宝支付appid
        zfb_pubcer: '', // 支付宝公钥，并非应用公钥
        zfb_pricer: '', // 支付宝支付私钥
        value: false,
      }
    };
  },
  methods: {
    getUpLoadGzh(e) { // 上传微信公众号退款证书文件
      toBase(e, (base64) => {
        this.params.wxPub_cer = base64
      })
    },
    getUpLoadXcx(e) { // 上传小程序退款证书文件
      toBase(e, (base64) => {
        this.params.wx_mini_cer = base64
      })
    },
    getUpLoadKfzf(e) { // 上传微信开发支付证书文件
      toBase(e, (base64) => {
       this.params.wxOpern_cer = base64
      })
    },
    getInfo(id) { // 获取信息
      api.payInfo({ id }).then(res => {
        if (res.success) {
          const t = this.params
          for (const key in t) {
            this.params[key] = res.data[key]
          }
        }
      })
    },
    submitForm(ruleForm) { // 保存
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          const params = { ...this.params }
          params.id = this.$route.query.id
          params.agentId = this.$route.query.agentId
          api.payInfoUpdate(params).then(res => {
            if (res.success) {
              this.$message.success('修改成功！')
              this.$router.back()
            }
          })
        }
      })
    }
  },
  mounted() {
    if (this.$route.query.id && this.$route.query.agentId) {
      this.getInfo(this.$route.query.id)
    } else {
      this.$router.back()
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  max-width: 1000px;
  margin: 0 auto;
  .title {
    width: 100%;
    margin: 15px 0;
    line-height: 30px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }
}
</style>
